<template>
    <section class="form-container">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" style="padding:30px 14px;">
            <el-form-item label="班次" prop="arrangeSectionCode">
                {{orderConfig.arrangeSection.lineSectionName}} {{orderConfig.arrangeSection.startTime}}

                <el-button type="text" @click="showArrange">选择</el-button>
            </el-form-item>

            <el-form-item label="座位" prop="passengerList">
                <el-tag v-for="item in form.passengerList" type="success" style="margin-right:10px;">
                    {{item.seatName}}(￥{{item.seatPrice}})
                </el-tag>
                <el-button type="text" @click="showSeat()">选择</el-button>
            </el-form-item>

            <div style="width:50%">
                <el-form-item label="上车地址" prop="startShowAddress">
                    <el-input v-model="form.startShowAddress">
                        <template #append>
                            <el-button slot="reference" @click="showMap('start')">点击选择</el-button>
                        </template>
                    </el-input>
                    <div v-if="form.startAddress.address">
                        <div v-if="form.startAddress.inPolygonInfo">
                            {{form.startAddress.inPolygonInfo.fenceNameShort}}区域，附加费 <span style="color:#F00;">{{form.startAddress.inPolygonInfo.additionalFee}}</span>元
                        </div>
                        <div v-else style="color:#F00;">不在可订票范围</div>
                    </div>
                </el-form-item>

                <el-form-item label="下车地址" prop="endShowAddress">
                    <el-input v-model="form.endShowAddress">
                        <template #append>
                            <el-button slot="reference" @click="showMap('end')">点击选择</el-button>
                        </template>
                    </el-input>
                    <div v-if="form.endAddress.address">
                        <div v-if="form.endAddress.inPolygonInfo">
                            {{form.endAddress.inPolygonInfo.fenceNameShort}}区域，附加费 <span style="color:#F00;">{{form.endAddress.inPolygonInfo.additionalFee}}</span>元
                        </div>
                        <div v-else style="color:#F00;">不在可订票范围</div>
                    </div>
                </el-form-item>
                <el-form-item label="联系人" prop="contactsName">
                    <el-input v-model="form.contactsName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系电话" prop="contactsPhone">
                    <el-input v-model="form.contactsPhone" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="总价" prop="totalMoney">
                    <el-input v-model="form.totalMoney" placeholder="请输入" readonly/>
                </el-form-item>
                <el-form-item label="优惠金额" prop="discountMoney">
                    <el-input v-model="form.discountMoney" placeholder="请输入"  @change="calcMoney()"/>
                    <div class="form-tips">金额必须为成人座的整数倍</div>
                </el-form-item>
                <el-form-item label="应付金额" prop="shouldPayMoney">
                    <el-input v-model="form.shouldPayMoney" placeholder="请输入" readonly/>
                </el-form-item>
                <el-form-item label="UID" prop="uid">
                    <el-input v-model="form.uid" placeholder="请输入" />
                    <div class="form-tips">当前UID可查看此订单</div>
                </el-form-item>
                <el-form-item label="备注" prop="serviceRemark">
                    <el-input v-model="form.serviceRemark" placeholder="请输入" />
                </el-form-item>
            </div>

            <el-form-item label="">
                <el-popconfirm title="确定下单吗？" @onConfirm="submitForm()">
                    <el-button slot="reference" type="primary">下单</el-button>
                </el-popconfirm>
            </el-form-item>
        </el-form>
        <SelSeat ref="selSeatRef" @refresh="setSeat"/>
        <GMapSelect ref="mapRef" @bindMapInfo="bindMapInfo"/>
        <SelArrange ref="selArrangeRef" @refresh="setArrangeSection" />
    </section>
</template>

<script>
    import {
        TicketOrderApi
    } from '@/api/intercity/TicketOrderApi'
    import {
        Common
    } from '@/utils/common'
    import SelSeat from './selSeat.vue'
    import GMapSelect from '@/components/Map/GMapSelect.vue'
    import SelArrange from '../arrange/SelArrange.vue'

    export default {
        name: 'TicketOrderCreate',
        components: {
            SelSeat,GMapSelect,SelArrange
        },
        data() {
            return {
                form: {
                    arrangeSectionCode:'',
                    passengerList:[],
                    startShowAddress:'',
                    startAddress:{
                        provinceCode:'',
                        provinceName:'',
                        cityCode:'',
                        cityName:'',
                        districtCode:'',
                        districtName:'',
                        streetCode:'',
                        streetName:'',
                        address:'',
                        lng:'',
                        lat:'',
                        inPolygonInfo:''
                    },
                    endShowAddress:'',
                    endAddress:{
                        provinceCode:'',
                        provinceName:'',
                        cityCode:'',
                        cityName:'',
                        districtCode:'',
                        districtName:'',
                        streetCode:'',
                        streetName:'',
                        address:'',
                        lng:'',
                        lat:'',
                        inPolygonInfo:''
                    },

                    totalMoney:'',
                    discountType:1,
                    discountMoney:'',
                    shouldPayMoney:'',
                    contactsName:'',
                    contactsPhone:'',
                    serviceRemark:''

                },
                rules: {
                    arrangeSectionCode: [
                        {required: true, message: '请选择班次', trigger: 'change'}
                    ],
                    passengerList: [
                        {required: true, message: '请选择座位', trigger: 'change'}
                    ],
                    startShowAddress: [
                        {required: true, message: '请选择上车地址', trigger: 'blur'},
                    ],
                    endShowAddress: [
                        {required: true, message: '请选择下车地址', trigger: 'blur'}
                    ],
                    contactsName: [
                        {required: true, message: '请填联系人', trigger: 'blur'}
                    ],
                    contactsPhone: [
                        {required: true, message: '请填写联系电话', trigger: 'blur'},
                        {min: 11,max: 11,message: '手机号为11个数字',trigger: 'blur'}
                    ]
                },
                orderConfig:{
                    arrangeSection:{lineSectionName:''}
                },
                addrsssFlag:'',


                currentUrl:''
            }
        },
        created() {
            this.refresh()
        },

        watch:{
            $route(to,from){
                if(to.name=='TicketOrderCreate' && this.currentUrl != location.href){
                    this.refresh()

                }
            }
        },
        methods: {
            refresh(){
                if (this.$refs['formRef'] !== undefined) {
                    this.$refs['formRef'].resetFields()
                }

                this.form.arrangeSectionCode = this.$router.currentRoute.query.arrangeSectionCode

                if(this.form.arrangeSectionCode){
                    this.getTakeOrderConfig()
                }else{
                    this.orderConfig={arrangeSection:{lineSectionName:''}}
                }

                this.currentUrl = location.href
            },
            getTakeOrderConfig(){
                TicketOrderApi.getTakeOrderConfig(this.form.arrangeSectionCode).then((response) => {
                    response.arrangeSectionSeatList = response.arrangeSectionSeatList.filter(item => !item.isDriverSeat && (item.status==1 || item.status==3))
                    response.arrangeSectionSeatList.forEach(function(item){
                        item.seatPrice = item.seatPrice/100
                        item.passengerType = '1'
                        item.certificateType = '1'
                    })
                    this.orderConfig = response
                })
            },
            showArrange() {
                this.$refs['selArrangeRef'].show()
            },
            setArrangeSection(arrangeSectionInfo){

                this.form.arrangeSectionCode = arrangeSectionInfo.arrangeSectionCode
                this.getTakeOrderConfig()
            },
            showSeat() {
                this.$refs['selSeatRef'].show(this.orderConfig.arrangeSectionSeatList,this.form.passengerList)
            },
            setSeat(seatList){
                this.form.passengerList = seatList
                if(seatList){
                    this.form.discountMoney = (seatList.length * this.orderConfig.arrange.discountedActivitiesMoney)/100
                }else{
                    this.form.discountMoney = 0
                }
                this.calcMoney()
            },
            showMap(val) {
                this.addrsssFlag = val
                let data = {}
                if(val=='start'){
                    data = Common.deepClone(this.form.startAddress)
                    data['orderConfig'] = {
                        carParkId:this.orderConfig.arrangeSection.startCarParkId,
                        fenceList: this.orderConfig.lineSectionVersion.startCarParkFenceList
                    }
                }else{
                    data = Common.deepClone(this.form.endAddress)
                    data['orderConfig'] = {
                        carParkId:this.orderConfig.arrangeSection.endCarParkId,
                        fenceList: this.orderConfig.lineSectionVersion.endCarParkFenceList
                    }
                }

                this.$refs['mapRef'].showMap(data)
            },

            bindMapInfo(data) {
                let showAddress = data.address
                data.address = data.address.replace(data.provinceName,'').replace(data.cityName,'').replace(data.districtName,'').replace(data.streetName,'')

                if(this.addrsssFlag == 'start'){
                    this.form.startShowAddress = showAddress
                    this.$set(this.form, 'startAddress', data)
                }else{
                    this.form.endShowAddress = showAddress
                    this.$set(this.form, 'endAddress', data)
                }

                this.calcMoney()
            },
            //计算费用
            calcMoney(){
                let totalMoney = 0;
                if(this.form.passengerList && this.form.passengerList.length > 0){
                    this.form.passengerList.forEach(function(item){
                        totalMoney+=item.seatPrice
                    })
                }

                if(this.form.startAddress.inPolygonInfo && this.form.startAddress.inPolygonInfo.additionalFee){
                    totalMoney += parseInt(this.form.startAddress.inPolygonInfo.additionalFee)
                }

                if(this.form.endAddress.inPolygonInfo && this.form.endAddress.inPolygonInfo.additionalFee){
                    totalMoney += this.form.endAddress.inPolygonInfo.additionalFee
                }

                this.form.totalMoney = totalMoney
                this.form.discountMoney = this.form.discountMoney?this.form.discountMoney:0
                this.form.shouldPayMoney = totalMoney - this.form.discountMoney
            },

            // 提交表单
            submitForm() {
                const that = this

                let data = Common.deepClone(that.form)

                data.totalMoney = data.totalMoney*100
                data.discountMoney = data.discountMoney*100
                data.shouldPayMoney = data.shouldPayMoney*100

                data.passengerList.forEach(function(item){
                    item.seatPrice = item.seatPrice*100
                    item.seatType = 1
                })

                that.$refs['formRef'].validate((valid) => {
                    if (!valid) return false
                    TicketOrderApi.create(data).then(() => {
                        that.$refs['formRef'].resetFields()
                        that.form.startAddress = {}
                        that.form.endAddress = {}
                    })
                })
            }
        }
    }
</script>
